<!DOCTYPE html>
<!-- Created by 白墨 on 2021/4/17 22:34:31-->
<html lang="zh-cmn-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title th:replace="${title}">博客详情</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
  <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
  <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
  <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/APlayer.min.css" th:href="@{/css/APlayer.min.css}">
</head>
<body>
<!-- 导航 -->
<nav th:fragment="menu(n)" class="ui attached segment m-shadow-small animated fadeInDown tm-hf">
  <div class="ui container">
    <div class="ui secondary stackable menu">
      <div id="weather-v2-plugin-simple" style="z-index: 999"></div>
      <h2 class="ui blue header" style="margin-right: 70px ; margin-left: 70px ; margin-bottom: 20px">白墨の博客</h2>
      <a href="" th:href="@{/}" class="m-item blue item m-mobile-hide m-opacity-mini" th:classappend="${n==1} ? 'active'" style="color: white" ><i class="home icon"></i> 首页</a>
      <a href="" th:href="@{/types/-1}" class="m-item blue item m-mobile-hide m-opacity-mini" th:classappend="${n==2} ? 'active'" style="color: white"><i class="idea icon"></i>分类</a>
      <a href="" th:href="@{/tags/-1}" class="m-item blue item m-mobile-hide m-opacity-mini" th:classappend="${n==3} ? 'active'" style="color: white"><i class="tags icon"></i>标签</a>
      <a href="" th:href="@{/archives}" class="m-item blue item m-mobile-hide m-opacity-mini" th:classappend="${n==4} ? 'active'" style="color: white"><i class="clone icon"></i>归档</a>
      <a href="" th:href="@{/about}" class="m-item blue item m-mobile-hide m-opacity-mini" th:classappend="${n==5} ? 'active'" style="color: white"><i class="info icon"></i>关于我</a>
      <div class="right item ui category search">
        <form name="search" action="" th:action="@{/search}" method="post" target="_blank">
          <div class="ui icon input tm-qt">
            <input class="prompt tm-qt" name="query" type="text" placeholder="search..."  th:value="${query}">
            <i onclick="document.forms['search'].submit()" class="search link icon"></i>
          </div>
        </form>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>

</nav>

<!-- 底部 -->
<footer th:fragment="footer" class="ui vertical segment m-padded-tb-massive tm-hf">
  <div id="aplayer">

  </div>
  <div class="ui center aligned container">
    <div class="ui stackable divided grid tm-qt">
      <div class="three wide column" align="center">
        <img src="../static/image/mine.png" th:src="@{/image/mine.png}" class="ui rounded image m-opacity-mini" style="width: 110px;" alt="">
      </div>
      <div class="three wide column">
        <h4 class="ui header m-text-spaced m-opacity-mini" style="color: white">最新博客</h4>
        <div id="newblog-container">
          <div class="ui  link list" th:fragment="newblogList">
            <a href="" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item m-text-thin m-text-spaced m-opacity-mini" th:each="blog : ${newblogs}" th:text="${blog.title}" style="color: white">用户故事(user)</a>
          </div>
        </div>
      </div>
      <div class="four wide column">
        <h4 class="ui header m-text-spaced m-opacity-mini" style="color: white">联系方式</h4>
        <div class="ui link list">
          <a href="" class="item m-text-mini  m-text-spaced m-opacity-mini" th:text="#{index.email}" style="color: white"></a>
          <a href="" class="item m-text-thin  m-text-spaced m-opacity-mini" style="color: white">QQ/QID：BaiMoAiXLY</a>
          <a href="" class="item m-text-thin  m-text-spaced m-opacity-mini" style="color: white">公众号：白墨是个程序猿</a>
        </div>
      </div>
      <div class="six wide column">
        <h4 class="ui header m-text-spaced m-opacity-mini" style="color: white">关于我</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini" style="color: white">
          本博客是我的毕设项目。</br>前端HTML+JS+JQuery+SemanticUI</br>后端SpringBoot+Mybatis+Thymeleaf</br>对这些技术有兴趣的朋友可以联系我，我们一起学习进步。</p>
      </div>
    </div>
    <div class="ui section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-mini" style="color: white">Copyright © 2021 &nbsp; 白墨</p>
    <p><a class="m-text-thin m-text-spaced m-opacity-mini" href="https://beian.miit.gov.cn/" target="_blank">备案信息：备案准备中</a></p>
    <span id="timeDate" class="m-text-thin m-text-spaced m-opacity-mini" style="color: white">载入天数...</span><span id="times" class="m-text-thin m-text-spaced m-opacity-mini" style="color: white">载入时分秒...</span>
  </div>

  <script>
    var now = new Date();

    function createtime() {
      var grt = new Date("04/13/2021 17:00:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
      now.setTime(now.getTime() + 250);
      days = (now - grt) / 1000 / 60 / 60 / 24;
      dnum = Math.floor(days);
      hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
      hnum = Math.floor(hours);
      if (String(hnum).length == 1) {
        hnum = "0" + hnum;
      }
      minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
      mnum = Math.floor(minutes);
      if (String(mnum).length == 1) {
        mnum = "0" + mnum;
      }
      seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
      snum = Math.round(seconds);
      if (String(snum).length == 1) {
        snum = "0" + snum;
      }
      document.getElementById("timeDate").innerHTML = "本站已运行 " + dnum + " 天 ";
      document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }

    setInterval("createtime()", 250);
  </script>
</footer>


<th:block th:fragment="script">
  <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>

  <script src="../static/lib/prism/prism.js" th:src="@{lib/prism/prism.js}"></script>
  <script src="../static/lib/tocbot/tocbot.js" th:src="@{lib/tocbot/tocbot.js}"></script>
  <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{lib/qrcode/qrcode.min.js}"></script>
  <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{lib/waypoints/jquery.waypoints.min.js}"></script>
  <script src="../static/js/APlayer.min.js" th:src="@{/js/APlayer.min.js}"></script>
</th:block>

<script>
  $('#newblog-container').load("[[@{/footer/newblog}]]");
</script>


</body>
</html>